<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画性能优化示例</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 2rem;
            background-color: #f0f0f0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .example-section {
            background: white;
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h2 {
            margin-bottom: 1rem;
            color: #444;
        }

        .comparison {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }

        .comparison > div {
            flex: 1;
            margin: 0 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }

        /* 1. transform vs left/top */
        .move-left-top {
            width: 50px;
            height: 50px;
            background: #ff6b6b;
            position: relative;
            animation: moveLeftTop 2s infinite;
        }

        @keyframes moveLeftTop {
            0% { left: 0; top: 0; }
            50% { left: 100px; top: 50px; }
            100% { left: 0; top: 0; }
        }

        .move-transform {
            width: 50px;
            height: 50px;
            background: #4ecdc4;
            position: relative;
            animation: moveTransform 2s infinite;
        }

        @keyframes moveTransform {
            0% { transform: translate(0, 0); }
            50% { transform: translate(100px, 50px); }
            100% { transform: translate(0, 0); }
        }

        /* 2. will-change */
        .no-will-change {
            width: 50px;
            height: 50px;
            background: #45b7d1;
            transition: transform 0.3s;
        }

        .no-will-change:hover {
            transform: scale(1.2);
        }

        .with-will-change {
            width: 50px;
            height: 50px;
            background: #96ceb4;
            transition: transform 0.3s;
            will-change: transform;
        }

        .with-will-change:hover {
            transform: scale(1.2);
        }

        /* 3. 减少重排重绘 */
        .reflow {
            width: 50px;
            height: 50px;
            background: #d4a5a5;
            animation: changeSize 2s infinite;
        }

        @keyframes changeSize {
            0% { width: 50px; height: 50px; }
            50% { width: 100px; height: 100px; }
            100% { width: 50px; height: 50px; }
        }

        .transform-scale {
            width: 50px;
            height: 50px;
            background: #ff7eb3;
            animation: changeScale 2s infinite;
        }

        @keyframes changeScale {
            0% { transform: scale(1); }
            50% { transform: scale(2); }
            100% { transform: scale(1); }
        }

        /* 4. 硬件加速 */
        .no-acceleration {
            width: 50px;
            height: 50px;
            background: #7eb3ff;
            position: relative;
            animation: moveOpacity 2s infinite;
        }

        @keyframes moveOpacity {
            0% { opacity: 1; left: 0; }
            50% { opacity: 0.5; left: 100px; }
            100% { opacity: 1; left: 0; }
        }

        .with-acceleration {
            width: 50px;
            height: 50px;
            background: #b37eff;
            transform: translateZ(0);
            animation: moveTransformOpacity 2s infinite;
        }

        @keyframes moveTransformOpacity {
            0% { opacity: 1; transform: translateX(0); }
            50% { opacity: 0.5; transform: translateX(100px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* 性能监控面板 */
        #performance-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="performance-panel">
        FPS: <span id="fps">0</span>
    </div>

    <div class="container">
        <h1>CSS动画性能优化示例</h1>

        <div class="example-section">
            <h2>1. transform vs left/top</h2>
            <p>对比使用left/top和transform的性能差异：</p>
            <div class="comparison">
                <div>
                    <h4>使用left/top（可能导致重排）</h4>
                    <div class="move-left-top"></div>
                </div>
                <div>
                    <h4>使用transform（性能更好）</h4>
                    <div class="move-transform"></div>
                </div>
            </div>
        </div>

        <div class="example-section">
            <h2>2. will-change属性</h2>
            <p>对比使用will-change的效果（悬停查看）：</p>
            <div class="comparison">
                <div>
                    <h4>不使用will-change</h4>
                    <div class="no-will-change"></div>
                </div>
                <div>
                    <h4>使用will-change</h4>
                    <div class="with-will-change"></div>
                </div>
            </div>
        </div>

        <div class="example-section">
            <h2>3. 减少重排重绘</h2>
            <p>对比直接改变尺寸和使用transform scale：</p>
            <div class="comparison">
                <div>
                    <h4>改变width/height（触发重排）</h4>
                    <div class="reflow"></div>
                </div>
                <div>
                    <h4>使用transform scale（性能更好）</h4>
                    <div class="transform-scale"></div>
                </div>
            </div>
        </div>

        <div class="example-section">
            <h2>4. 硬件加速</h2>
            <p>对比使用硬件加速的效果：</p>
            <div class="comparison">
                <div>
                    <h4>不使用硬件加速</h4>
                    <div class="no-acceleration"></div>
                </div>
                <div>
                    <h4>使用硬件加速</h4>
                    <div class="with-acceleration"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // FPS计数器
        let frameCount = 0;
        let lastTime = performance.now();
        const fpsDisplay = document.getElementById('fps');

        function updateFPS() {
            frameCount++;
            const currentTime = performance.now();
            
            if (currentTime >= lastTime + 1000) {
                fpsDisplay.textContent = frameCount;
                frameCount = 0;
                lastTime = currentTime;
            }

            requestAnimationFrame(updateFPS);
        }

        updateFPS();
    </script>
</body>
</html>
